<template>
  <div>
    <div class="col-12 seedbody seedfrist">
      <div class="count">
        <span class="title"><slot name="title"></slot></span>
        <!-- <span class="zhankai"
          ><img src="@/assets/images/seed/zhankai.png" alt="" /><img
            src="@/assets/images/seed/shousuo.png"
            alt=""
        /></span> -->
      </div>
      <div>
        <div class="states-type">
          <span class="type-title">时间范围:</span>
          <b-badge
            variant="light"
            class="states-type-item"
            :class="{ isActive: dailyTime.timeTypeChange == item.index }"
            v-for="item in dailyTime.time"
            :key="item.index"
            @click="timeType(item)"
            >{{ item.name }}</b-badge
          >
        </div>
        <div class="states-time">
          <span class="time-title">日志分类:</span>
          <b-badge
            variant="light"
            class="states-time-item"
            :class="{ isActive: dailyRange.dailyTypeChange == item.index }"
            @click="dailyRangeActive(item)"
            v-for="item in dailyRange.daily"
            :key="item.index"
            >{{ item.name }}</b-badge
          >
        </div>
        <div class="states-type">
          <span class="type-title">日志等级:</span>
          <b-badge
            variant="light"
            class="states-type-item"
            :class="{ isActive: dailyGrade.dailyTypeChange == item.index }"
            v-for="item in dailyGrade.daily"
            :key="item.index"
            @click="dailyGradeActive(item)"
            >{{ item.name }}</b-badge
          >
        </div>
        <div class="states-type">
          <span class="type-title">系统环境:</span>
          <b-badge
            variant="light"
            class="states-type-item"
            :class="{ isActive: system.systemTypeChange == item.index }"
            v-for="item in system.daily"
            :key="item.index"
            @click="systemActive(item)"
            >{{ item.name }}</b-badge
          >
        </div>
        <div class="states-type">
          <span class="type-title">信源类型:</span>
          <b-badge
            variant="light"
            class="states-type-item"
            :class="{ isActive: message.messageTypeChange == item.index }"
            v-for="item in message.daily"
            :key="item.index"
            @click="messageActive(item)"
            >{{ item.name }}</b-badge
          >
        </div>
      </div>
    
    </div>
  </div>
</template>

<script>
export default {
  props: ["dailyTime", "dailyRange", "dailyGrade", "system", "message"],
  mounted() {
    console.log(this.dailyTime);
    console.log(this.dailyRange);
    console.log(this.dailyGrade);
  },
  data() {
    return {
      
    };
  },
  methods: {
    //时间范围
    timeType(item) {
      this.dailyTime.timeTypeChange = item.index;
    },
    // 日志分类
    dailyRangeActive(item) {
      this.dailyRange.dailyTypeChange = item.index;
    },
    // 日志等级
    dailyGradeActive(item) {
      this.dailyGrade.dailyTypeChange = item.index;
    },
    // 系统环境
    systemActive(item) {
      this.system.systemTypeChange = item.index;
    },
    //信源类型
    messageActive(item) {
      this.message.messageTypeChange = item.index;
    },
  },
  components: {

  },
};
</script>

<style  lang="scss" scoped>
.seedTitle {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
}
input,
.multiselect {
  width: 350px;
  height: 40px;
}
input {
  border: 1px solid #ced4da !important;
  outline: none;
  border-radius: 5px;
}
.duoxuan {
  display: flex;
  justify-content: space-between;
}
.tijiao {
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.form-group {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  input {
    &:nth-child(2) {
      float: right;
    }
  }
  .basic-title,
  .extend-title {
    display: inline-block;
    border-bottom: 1px solid #bbb;
    font-size: 16px;
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedfrist {
  margin-top: 0px !important;
}
.seedbody {
  margin-bottom: 0px;
}
// 走势图
.sparklines {
  margin-top: 20px;
  font-size: 15px;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    font-size: 15px;
  }
  .states-type-item {
    font-size: 15px;
    padding: 5px 25px;
    margin: 0 10px;
    font-weight: 400;
    border-radius: 4px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    font-size: 15px;
  }
  .states-time-item {
    font-size: 15px;
    padding: 5px 20px;
    margin: 0 10px;
    font-weight: 400;
    &:hover {
      cursor: pointer;
    }
  }
}
.card-body {
  margin-top: 20px;
}
</style>